<template>
	<view >
		<view class="courier-number">
			<span>发货数量</span>
			<radio-group @change="radioChange" class="radio-group">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					<view class="radio">
						<radio :value="item.value" :checked="index === current" color="#077840" />
					</view>
					<view class="name">{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		
		<view class="split-line"></view>
		<view class="goods_detail">
			<view class="goods_detail_item" v-for="(item,index) in orderDeliveryList " :key='index'>
				<text class="goods_detail_item_order_title">订单商品</text>
				<text class="goods_detail_item_gooods_name">{{item.title}}，{{item.msg}}</text>
				<text class="goods_detail_item_shipments_number">发货数量</text>
				<input class="goods_detail_item_shipments_import" type="number" v-model="item.out_num" placeholder="请输入发货数量" />
				<text class="goods_detail_item_extra">剩余待发货</text>
				<text class="goods_detail_item_extra_number">{{item.residue_amount}}{{item.unit}}</text>
			</view>
		</view>
		<!-- <view class="detial">
			<view class="detail-top">
				<span>订单商品</span>
				<span class='num'>发货数量</span>
				<span>剩余待发货</span>
			</view>
			<view  class="detail-content" v-for="(item,index) in orderDeliveryList " :key='index' :class="index==current1 ? 'active' :''" @click="tab(index)">
				<view class='flower-name'>{{item.title}}</view>
				<view class='num'> <input type="number" v-model="item.out_num"  class="number" />件</view>
				<view>{{item.residue_amount}}件</view>
			</view>
		</view> -->
	  <view class="confirm" @click="confirm">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '全部发货'
					},
					{
						value: '2',
						name: '发货部分',
						
					},
				],
				current: 1,
				current1:0,
				cid:0,
				orderDeliveryList:[],
				inputNumber:'',
				deliveryList:[],
				order_id:''
			}
		},
		
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			     this.cid =option.cid
				 this.status = option.status
				 this.order_id=option.order_id
				 console.log(this.status);
				console.log(this.cid);
			   this.orderGoods()
			   this.express_order = option.express_order
			   this.express_id  =Number(option.express_id +1) 
			   console.log( this.express_order);
			   console.log( this.express_id );
			   },
			
		methods: {
			// ordergoods列表
			orderGoods(){
				this.api.orderDeliveryList({
					order_id:this.cid
				})
				.then(res=>{
					this.orderDeliveryList = res.data.data
					console.log(this.orderDeliveryList);
					this.orderDeliveryList.forEach(item=>{
						item.out_num=''
						item.unit=item.spec.split(',')[1]
						item.msg=item.spec.split(',')[0]+'，'+item.spec.split(',')[2]
					})
				
					// console.log(this.orderDeliveryList);
					
				})
				.catch(err=>{})
			},
			// 单选按钮点击事件
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			 tab:function(index){
				 this.current1 = index
			 },
			 confirm(){
				 let cn =[]
				 this.orderDeliveryList.map(item=>{
					 console.log(item);
					 if(Number(item.out_num)>Number(item.residue_amount)){
						 this.tui.toast(item.title+item.msg+'的发货数量大于代发货数量')
						 return
					 }else{
						 let obj={}
						 obj['id']=item.id
						 obj['out_num']=item.out_num
						 cn.push(obj)						 
					 }
				  })
				  var that = this
				  this.deliveryList=JSON.stringify(cn)
				  if(cn.length>0){
					  if(this.status==4){
					  	this.api.orderDelivery({deliveryList:this.deliveryList,type:1,uid:uni.getStorageSync('uid'),order_id:this.order_id}
					  	)
					  	.then(res=>{
					  		console.log(res.data.code);
					  		uni.showToast({
					  		title: '发货成功',
					  		duration: 2000
					  		})
					  		uni.$emit('updateOrderList')
					  		uni.reLaunch({
					  			url:'../../orderList?status=4'
					  		})
					  		})			
					  	.catch(err=>{})
					  }else {
					  	this.api.courierDelivery({deliveryList:this.deliveryList,type:1,express_order:this.express_order,express_id:this.express_id,uid:uni.getStorageSync('uid'),order_id:this.order_id}
					  	)
					  	.then(res=>{
					  		console.log(res.data.data);
					  		uni.showToast({
					  		title: '发货成功',
					  		
					  		})
					  		})
					  		uni.$emit('updateOrderList')
					  		 uni.reLaunch({
					  		 	url:'../../orderList?status=5'
					  		 })
					  	.catch(err=>{})
					  }
				  }
				// this.orderDeliveryList.map(item=>{
				// 	if(item.residue_amount==0){
				// 		that.tui.toast('该订单已全部发货,不可再次发货')
				// 	}else {
						// if(this.status==4){
						// 	this.api.orderDelivery({deliveryList:this.deliveryList,type:1,uid:uni.getStorageSync('uid'),order_id:this.order_id}
						// 	)
						// 	.then(res=>{
						// 		console.log(res.data.code);
						// 		uni.showToast({
						// 		title: '发货成功',
						// 		duration: 2000
						// 		})
						// 		uni.$emit('updateOrderList')
						// 		uni.reLaunch({
						// 			url:'../../orderList?status=4'
						// 		})
						// 		})			
						// 	.catch(err=>{})
						// }else {
						// 	this.api.courierDelivery({deliveryList:this.deliveryList,type:1,express_order:this.express_order,express_id:this.express_id,uid:uni.getStorageSync('uid'),order_id:this.order_id}
						// 	)
						// 	.then(res=>{
						// 		console.log(res.data.data);
						// 		uni.showToast({
						// 		title: '发货成功',
								
						// 		})
						// 		})
						// 		uni.$emit('updateOrderList')
						// 		 uni.reLaunch({
						// 		 	url:'../../orderList?status=5'
						// 		 })
						// 	.catch(err=>{})
						// }
					// }
				// })
				
			 }
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #F9F9F9;
	}
	.courier-number {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		padding-left: 30rpx;
		line-height: 100rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-bottom: 20rpx;
		.radio-group {
			display: inline-block;
	
			view {
				display: inline-block;
	
			}
	
			.radio {
				margin-left: 30rpx;
			}
	
			.name {
				margin-right: 50rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.split-line {
		width: 100%;
		height: 20rpx;
		background-color: #F9F9F9;
	}
	.goods_detail{
		padding: 0 30rpx;
		.goods_detail_item{
			// width: 100%;
			display: flex;
			padding: 30rpx;
			flex-direction: column;
			background: #FFFFFF;
			.goods_detail_item_order_title{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
			.goods_detail_item_gooods_name{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-top: 20rpx;
			}
			.goods_detail_item_shipments_number{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin-top: 40rpx;

			}
			.goods_detail_item_shipments_import{
				height: 50rpx;
				padding-bottom: 10rpx;
				border-bottom: 2rpx solid #EEEEEE;
				margin-top: 20rpx;
			}
			.goods_detail_item_extra{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin-top: 40rpx;

			}
			.goods_detail_item_extra_number{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-top: 20rpx;

			}
		}
	}
	.detial {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		
		background-color: #fff;
		.detail-top {
			line-height: 84rpx;
			padding-left: 52rpx;
			padding-right: 34rpx;
			box-sizing: border-box;
			.num {
				margin-left: 120rpx;
				margin-right: 102rpx;
			}
		}
		.detail-content {
			padding-left: 52rpx;
			padding-right: 34rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			font-size: 28rpx;
			&.active {
			  background-color: #F2FFF9;
			}	
			line-height: 100rpx;
			.flower-name {
				font-size: 25rpx;
				width: 160rpx;
				// height: 100rpx;
				// display: inline-block;
				// margin-right: 46rpx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.number {
				display: inline-block;
				width: 156rpx;
				height: 66rpx;
				line-height: 100rpx;
				background: #FFFFFF;
				border-radius: 2rpx;
				border: 2rpx solid #E4E4E4;
				vertical-align: middle;	
				margin-right: 10rpx;
			}
			.num {
				margin-right: 0;
			}
		}
	}
	.confirm {
		width: 630rpx;
		height: 96rpx;
		background: #077840;
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 32rpx;
		line-height: 96rpx;
		text-align: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 150rpx;

	}
</style>
